<template>
  <div class="info">
    <HeaderBar title="HPV" :month="month"/>
    <Grids :data="data.main"/>
    <TableHeader/>
    <DataTable title="BIW" :data="data.biw"/>
    <DataTable title="Paint" :data="data.paint"/>
    <DataTable title="Assembly" :data="data.assembly"/>
    <DataTable title="Logistics" :data="data.logistics"/>
    <DataTable title="Maintenance" :data="data.maintenance"/>
    <DataTable title="Supporting areas" :data="data.supportingAreas"/>
    <DataTable title="QM" :data="data.qm"/>
    <DataTable title="ME" :data="data.me"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HeaderBar from '@/components/HeaderBar.vue'
import Grids from '@/components/Grids.vue'
import TableHeader from '@/components/TableHeader.vue'
import DataTable from '@/components/DataTable.vue'

import jan from '@/data/hpv/jan'
import feb from '@/data/hpv/feb'
import mar from '@/data/hpv/mar'
import forecast from '@/data/hpv/forecast'

export default {
  name: 'home',
  components: {
    HeaderBar,
    Grids,
    TableHeader,
    DataTable
  },
  data () {
    return {
      data: null
    }
  },
  computed: {
    month () {
      return this.$route.query.month
    }
  },
  created () {
    // this.data = jan
  },
  watch: {
    '$route.query.month': {
      handler: function (key) {
        switch (key) {
          case 'Jan':
            this.data = jan
            break
          case 'Feb':
            this.data = feb
            break
          case 'Mar':
            this.data = mar
            break
          default:
            this.data = forecast
        }
      },
      immediate: true
    }
  }
}
</script>
